<template>
<div class="home">
    <!-- 顶部 -->
    <div class="home-box" >
        <div class="user iconfont icon-yonghu" v-show="user" @click="toLogin"></div>
          <div class="top" @click="toSearch">
            <span class="iconfont icon-sousuo2"></span>
            <span class="text">请输入商品名称</span>
            <span class="iconfont icon-yuyin1"></span>
          </div>
          <div class="iconfont icon-dianhua phone"></div>  
    </div>
  <!-- 轮播图 -->
    <div class="swipe">
        <van-swipe :autoplay="3000" indicator-color="white">
          <van-swipe-item><img src="https://f12.baidu.com/it/u=1571651589,1492814060&fm=72" alt=""></van-swipe-item>
          <van-swipe-item><img src="https://ss1.bdstatic.com/70cFvXSh_Q1YnxGkpoWK1HF6hhy/it/u=3029670650,511557875&fm=26&gp=0.jpg" alt=""></van-swipe-item>
          <van-swipe-item><img src="https://ss2.bdstatic.com/70cFvnSh_Q1YnxGkpoWK1HF6hhy/it/u=2156148005,2004440547&fm=15&gp=0.jpg" alt=""></van-swipe-item>
          <van-swipe-item><img src="https://ss1.bdstatic.com/70cFuXSh_Q1YnxGkpoWK1HF6hhy/it/u=3619707570,1565506383&fm=26&gp=0.jpg" alt=""></van-swipe-item>
        </van-swipe>
    </div>


    <div class="goods">
      
      <div class="hot-goods">
         <van-divider :style="{ color: 'rgb(182, 170, 170)', borderColor: 'rgb(182, 170, 170)', padding: '0 16px'}" style="font-size:0.3rem">
          抢购商品
        </van-divider>
        <van-count-down
          :time="time"
          format="DD 天 HH 时 mm 分 ss 秒"
          />

      </div>
      <div class="hotGoods">

        <div class="hotGoodsList">
          <img class="imgTop" src="//image7.benlailife.com/ProductImages/000/000/014/467/app/441429e8-d680-4728-9ee0-6391e14ef05a.jpg?imageView2/2/w/1035/format/webp" alt="">
          <div class="hotGoodsName">
            <p>菠菜</p>
            <p>￥3.00/斤</p>
          </div>
        </div>

        <div class="hotGoodsList">
          <img class="imgTop" src="//image7.benlailife.com/ProductImages/000/000/014/467/app/441429e8-d680-4728-9ee0-6391e14ef05a.jpg?imageView2/2/w/1035/format/webp" alt="">
          <div class="hotGoodsName">
            <p>菠菜</p>
            <p>￥3.00/斤</p>
          </div>
        </div>

        <div class="hotGoodsList">
          <img class="imgTop" src="http://img3.imgtn.bdimg.com/it/u=2547360220,1576755629&fm=26&gp=0.jpg" alt="">
          <div class="hotGoodsName">
            <p>菠菜</p>
            <p>￥3.00/斤</p>
          </div>
        </div>

        <div class="hotGoodsList">
          <img class="imgTop" src="http://img3.imgtn.bdimg.com/it/u=2547360220,1576755629&fm=26&gp=0.jpg" alt="">
          <div class="hotGoodsName">
            <p>菠菜</p>
            <p>￥3.00/斤</p>
          </div>
        </div>

        <div class="hotGoodsList">
          <img class="imgTop" src="http://img3.imgtn.bdimg.com/it/u=2547360220,1576755629&fm=26&gp=0.jpg" alt="">
          <div class="hotGoodsName">
            <p>菠菜</p>
            <p>￥3.00/斤</p>
          </div>
        </div>

       <div class="hotGoodsList">
          <img class="imgTop" src="http://img3.imgtn.bdimg.com/it/u=2547360220,1576755629&fm=26&gp=0.jpg" alt="">
          <div class="hotGoodsName">
            <p>菠菜</p>
            <p>￥3.00/斤</p>
          </div>
        </div>


      </div>

     
        <van-divider :style="{ color: 'rgb(182, 170, 170)', borderColor: 'rgb(182, 170, 170)', padding: '0 16px'}" style="font-size:0.3rem">
          热卖商品
        </van-divider>
      
       <van-notice-bar
          text="为了迎接双11,所有热卖商品全部五折出售,先到先得,会员会有更多优惠,烦请关注,谢谢"
          left-icon="volume-o"
        />

      <div class="hotGoods hotGoods-bottom">

        <div class="hotGoodsList">
          <img class="imgTop" src="http://img3.imgtn.bdimg.com/it/u=2547360220,1576755629&fm=26&gp=0.jpg" alt="">
          <div class="hotGoodsName">
            <p>菠菜</p>
            <p>￥3.00/斤</p>
          </div>
        </div>

        <div class="hotGoodsList">
          <img class="imgTop" src="//image7.benlailife.com/ProductImages/000/000/014/467/app/441429e8-d680-4728-9ee0-6391e14ef05a.jpg?imageView2/2/w/1035/format/webp" alt="">
          <div class="hotGoodsName">
            <p>菠菜</p>
            <p>￥3.00/斤</p>
          </div>
        </div>

        <div class="hotGoodsList">
          <img class="imgTop" src="//image7.benlailife.com/ProductImages/000/000/014/467/app/441429e8-d680-4728-9ee0-6391e14ef05a.jpg?imageView2/2/w/1035/format/webp" alt="">
          <div class="hotGoodsName">
            <p>菠菜</p>
            <p>￥3.00/斤</p>
          </div>
        </div>

         <div class="hotGoodsList">
          <img class="imgTop" src="//image7.benlailife.com/ProductImages/000/000/014/467/app/441429e8-d680-4728-9ee0-6391e14ef05a.jpg?imageView2/2/w/1035/format/webp" alt="">
          <div class="hotGoodsName">
            <p>菠菜</p>
            <p>￥3.00/斤</p>
          </div>
        </div>

        <div class="hotGoodsList">
          <img class="imgTop" src="//image7.benlailife.com/ProductImages/000/000/014/467/app/441429e8-d680-4728-9ee0-6391e14ef05a.jpg?imageView2/2/w/1035/format/webp" alt="">
          <div class="hotGoodsName">
            <p>菠菜</p>
            <p>￥3.00/斤</p>
          </div>
        </div>

      </div>

       <van-divider :style="{ color: 'rgb(182, 170, 170)', borderColor: 'rgb(182, 170, 170)', padding: '0 16px'}" style="font-size:0.3rem">
          新鲜食材
      </van-divider>

      <div class="bottomBox">
        <img class="bottomImg" src="http://img3.imgtn.bdimg.com/it/u=355705255,1296003134&fm=26&gp=0.jpg" alt="">
      </div>

  
    </div>
 
  </div>
</template>

<script>

// import Search from '@/components/Search.vue'

export default {
  name: 'home',
  components:{
    // Search
  },
  data(){
      return{
        // user:false,
        user:true,
        time: 30 * 60 * 60 * 1000

      }
    },

    methods: {
        toSearch(){
          this.$router.push('/search')
        },

        toLogin(){
           this.$router.push('/login')
        }
    },


    mounted() {
        const token=localStorage.getItem('token')
        console.log(token)
        if(!token){
            this.user=true
        }else{
          this.user=false
        }
        
    },

}
</script>


<style lang="scss" scoped>
  .home-box{
      height: 1rem;
      background-color: #3ac149;
      display: flex;
      justify-content: space-around;
      align-items: center;
      padding-top: 0.1rem;
      position: sticky;
      top: 0;
      left: 0;
      z-index: 100;
      .phone{
        color: #22732e;
      }

      .user{
        font-size:  0.6rem;
        color: #22732e;

      }

      .top{

          width: 75%;
          display: flex;
          text-align: center;
          align-items: center;
          height: 0.5rem;
          background-color: rgb(135, 211, 173);
          border-radius: 0.5rem;
          justify-content: center;
          justify-content: space-around;

          .icon-sousuo2{
            font-size: 0.35rem;
            color: white;
          }
          .icon-yuyin1{
            font-size: 0.35rem;
            color: #22732e;
          }
          .text{
             font-size: 0.25rem;
             color: white;
          }
        
      }
      .phone{
       font-size: 0.6rem;
       
       
      }
      

  }

  .swipe{
    width: 100vw;
    height: 3.5rem;

    img{
      width: 100vw;
      height: 3.5rem;
      object-fit: cover;
    }
  }

  .goods{
    padding-bottom: 1.2rem;

    .hot-goods{
      text-align: center;
      font-size: 0.3rem;
      // padding: 0.3rem 0;
    }
    .hotGoods{
      display: flex;
      overflow: auto;
     
       .hotGoodsList{
          display: flex;
          flex-direction:column;
          margin: 0 0.1rem;
        
          .imgTop{
            width: 2rem;
            height: 2rem;
            border-radius: 50%;
            
          }

          .hotGoodsName{
            display: flex;
            flex-direction:column;
            align-items: center;
          }

        }

    }



  } 

  .bottomBox{
    width: 100vw;
    height: 3rem;

    .bottomImg{
      width: 100%;
      height: 100%;
      object-fit: cover;
    }
  }


</style>
